<!--
	Copyright 2011 Chen Deng

	Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
 
      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License. 
-->
 
<html>
<head>
<script type="text/javascript">

var serverIP = "192.168.1.3:8080";
var connected = false;
var interval;

/**
 * Prompt user to specify IP and Port info of android server,
 * then try to establish the link with it.
 */
function ip_prompt(){
	// Provides sample input in textbox, when user input wrong IP/Port previously.
    if(serverIP == "" || serverIP == null){
		serverIP = "192.168.1.3:8080";
	}
	serverIP = prompt("Please enter android's IP address and port number: ", serverIP);
	sendXHR("__connection_request");

	/** 
	 * Use set interval to create 'multithreading' in a scheduling way.
	 * Since XmlHttpRequest is one request one response model(so far as I know),
     * this function send empty requests periodically, working as a server listener.
     */
	interval = setInterval("sendXHR('')", 500);
}

/* This function gets chat message from text box and append it to text area. */
function newInput(){
	var textBox = document.getElementById("tb");
	var msg = textBox.value;
	// Empty message not allowed
	if(msg != ""){
		sendXHR(msg);
		textBox.value = "";
		output(msg, "ME");
	}
}

/* Write message to text area */
function output(msg, username){
	var textArea = document.getElementById("ta");
	textArea.value = (username + ": " + msg + "\n") + textArea.value;
	// Always show latest message
	textArea.scrollTop = 0;
}

/* Send user input to server using XMLHttpRequest */
function sendXHR(msg){
	var xmlhttp;
	if (window.XMLHttpRequest){
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	  
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
				output( xmlhttp.responseText, "ANDROID");	
		}
	}
	xmlhttp.open("GET","http://" + serverIP + "/" + "__req_" + msg,true);
	xmlhttp.send();
}

function changeIP(){
	clearInterval(interval);
	ip_prompt();
}

function help(){
	window.open('http://code.google.com/p/androme-vision/wiki/AChatManual?ts=1304189102&updated=AChatManual','A-Chat Manual');
}

</script>
</head>

<body onLoad="ip_prompt()">

<!-- Table is used here for locating elements in center of the window -->
<table height="100%" width="100%">
<tr>
<td valign="center" align="center">

	<table height="300" width="500">
	<tr>
	<td valign="center" align="center">
		<img src="images/logo.gif" alt="logo"/>
	
		<!-- The following are the actual useful elements -->
		<!-- "keycode == 13" - receive Enter as trigger -->
		<input type="text" size="78" value="" id="tb" onkeydown="if (event.keyCode == 13) newInput()"/>
		<input type="button" style="width:70;height:23" value="Send" onClick="newInput()"/>
		<textarea readonly rows="10" cols="70" id="ta" style="margin-top:1.5em;margin-bottom:1em;line-height:2"></textarea>
	
		<input type="button" style="width:225;height:23;margin-right:4em" value="How to use" onClick="help()"/>
		<input type="button" style="width:225;height:23" value="Change Server IP/Port" onClick="changeIP()"/>
		<br/><br/><br/>
		<a href="http://code.google.com/p/androme-vision" style="font-family: arial,sans-serif;font-size: 10pt">Androme-Vision Project</a>
	</td>
	</tr>
	</table>

</td>
</tr>
</table>
    
</body>
</html>

